<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <flightsFilters :data="cacheFlightsData" @setDataList="setDataList" />

        <!-- 航班头部布局 -->
        <flightsListHead />

        <!-- 航班信息 -->
        <flightsItem v-for="(item,index) in dataList" :key="index" :data="item" />

        <!-- 分页组件 -->
        <!-- size-change: 切换条数时候触发的事件 -->
        <!-- current-change：页数切换时候触发的事件 -->
        <!-- current-page: 当前页数 -->
        <!-- page-size当前页面的条数 -->
        <!-- total是数据的总条数 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 侧边栏 -->
      <flightsAside />
    </el-row>
  </section>
</template>

<script>
import flightsListHead from "@/components/air/flightsListHead";
import flightsItem from "@/components/air/flightsItem";
import flightsFilters from "@/components/air/flightsFilters";
import flightsAside from "@/components/air/flightsAside";
export default {
  components: {
    flightsListHead,
    flightsItem,
    flightsFilters,
    flightsAside
  },
  data() {
    return {
      // 总数据，包含了 flights， info， options，flights用来渲染航班列表
      flightsData: {
        flights: [],
        info: {},
        options: {}
      },
      pageIndex: 1,
      pageSize: 5,
      total: 0,

      // 缓存一份总数据，这份数据一旦赋值之后不能被修改
      cacheFlightsData: {
        flights: [],
        info: {},
        options: {}
      }
    };
  },
   // 监听路由的变化，在组件被复用使用调用这个路由守卫
  async beforeRouteUpdate(to, from, next) {
    // 获取航班列表的函数,返回promise
    await this.getList(to.query)
     // 必须要调用
    next();
  },
  mounted() {
   this.getList(this.$route.query)
  },
  methods: {
    getList(query){
        // 请求机票列表数据
       return this.$axios({
        url: "/airs",
        params: query
        }).then(res => {
        // 总数据，包含了 flights， info， options，flights用来渲染航班列表
        const { data } = res;
        this.flightsData = data;
        // 赋值给拷贝的新数据, 这份数据一旦赋值之后不能被修改，之所以要解构，是因为直接赋值的话，是深拷贝，改变一个，全部都变，所以要解构，返回一个全新的数组
        this.cacheFlightsData = { ...data };
        this.total = this.flightsData.total;
        // this.dataList = this.flightsData.flights.slice(this.pageIndex - 1 , this.pageIndex * this.pageSize)
        // console.log(res);
    });
     },
    // 选择条数的时候触发
    handleSizeChange(val) {
      this.pageSize = val;
      // val是当前的选择的数据的条数
      // this.dataList = this.flightsData.flights.slice(this.pageIndex - 1 , this.pageIndex * val)
    },
    //   切换页数的时候触发
    handleCurrentChange(val) {
      //val是当前点击的页数
      // 修改当前的页数
      this.pageIndex = val;
      // 得到当前分页要渲染的数组slice分割数组的时候，不包括最后的一项
      // this.dataList = this.flightsData.flights.slice(
      //     (val - 1) * this.pageSize, val * this.pageSize
      // )
      // console.log(`当前页: ${val}`);
    },
    // 传递给子组件修改dataList的事件
    setDataList(arr) {
      // 这里是有问题的，一旦修改了flightsData,后面的值都会只剩下过滤后
      this.flightsData.flights = arr;
      //   更新数据总条数
      this.total = this.flightsData.flights.length;
      // 把页面设置为1
      this.pageIndex = 1;
    //   console.log(arr);
    }
  },
  computed: {
    // 保存当前的分页要渲染的数组
    // ！！computed会监听函数引用所有实例下的属性，一旦属性发生了变化就会再次执行函数，返回新的值 和data是一样的
    dataList() {
      const arr = this.flightsData.flights.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageIndex * this.pageSize
      );
      return arr;
    }
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>